<template>
  <div class="editor">
    <div class="editor-left">
      <div
        class="editor-left-item"
        v-for="item in config.componentList"
        :key="item.key"
      >
        <span class="editor-left-item-label">{{ item.label }}</span>
        <div class="editor-left-item-preview" :is="item.componentName"></div>
      </div>
    </div>
    <div class="editor-top">菜单栏</div>
    <div class="editor-right">属性控制栏目</div>
    <div class="editor-container">
      <div class="editor-container-canvas">
        <div class="editor-container__content" :style="contentStyle">
          <div
            v-for="item in blocks"
            :key="item.id"
            class="editor-block"
            :style="blockStyle(item)"
          >
            <span class="editor-block-label">
              {{ config.componentMap[item.key].label }}
            </span>
            <component
              :ref="'component' + item.id"
              class="editor-block-render"
              v-model="formData[item.propsKey]"
              :is="config.componentMap[item.key].componentName"
            ></component>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// <!-- 负责产生滚动条 --> <div class="editor-container-canvas">
// <!-- 产生内容区域 -->  <div class="editor-container__content">
import editorConfig from "./material/component-map";
export default {
  components: {
    ...editorConfig.renderRegister,
    ...editorConfig.previewRegister,
  },
  props: {
    value: {
      type: Object,
    },
  },
  inject: ["config"],
  data() {
    return {
      formData: {},
    };
  },
  computed: {
    contentStyle() {
      return {
        width: this.value.container.width + "px",
        height: this.value.container.height + "px",
      };
    },
    blocks() {
      return this.value.blocks || [];
    },
  },
  created() {
    console.log(this.blocks);
  },
  mounted() {
    this.blocks.forEach((block) => {
      this.$set(this.formData, block.propsKey, block.defaultValue);
      if (block?.event && Object.keys(block.event).length) {
        for (const eventType in block.event) {
          console.log(block.id);
          this.$refs[`component${block.id}`].$el.addEventListener(
            eventType,
            () => {
              let argument = [];
              if (block.event[eventType].argument?.length) {
                argument = block.event[eventType].argument;
              }

              const fn = Function(
                ...argument,
                block.event[eventType].statement
              );

              fn.call(this);
            }
          );
        }
      }
    });
  },
  methods: {
    blockStyle(item) {
      return {
        top: item.top + "px",
        left: item.left + "px",
        zIndex: item.zIndex,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.editor {
  width: 100%;
  height: 100%;
  position: relative;
  &-left,
  &-right {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    border: 1px solid #000;
  }
  &-left {
    left: 0;
    &-item {
      width: 100%;
      padding: 0 10px;
      display: flex;
      margin-bottom: 10px;
      justify-content: center;
      align-items: center;
      &-label {
        width: 80px;
        padding-right: 20px;
        text-align: right;
      }
      &-preview {
        flex: 1;
        text-align: left;
      }
    }
  }
  &-right {
    right: 0;
  }
  &-top {
    position: absolute;
    top: 0;
    left: 250px;
    right: 250px;
    width: calc(100% - 500px);
    height: 60px;
    border: 1px solid #000;
  }
  &-container {
    position: absolute;
    top: 60px;
    left: 250px;
    width: calc(100% - 500px);
    height: calc(100% - 60px);
    overflow: scroll;
    &__content {
      position: relative;
      .editor-block {
        width: 300px;
        padding: 10px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        &-label {
          width: 100px;
          padding-right: 20px;
          text-align: right;
        }
        &-render {
          flex: 1;
          text-align: left;
        }
      }
    }
  }
}
</style>
